<template>
  <div id="cardSwipingStatistics"></div>
</template>
<script scoped>
export default {
  data() {
    return {
      intruderAlarm: 0, //入侵报警
      fireAlarm: 0, //火灾报警
      otherAlarm: 0, //其他报警
      myChart: "",
    };
  },
  methods: {
    // 获取安防态势数据
    getalarmType() {
      alarmType()
        .then((res) => {
          console.log(res);
          this.alarmType1 = res.data.一般告警;
          this.alarmType2 = res.data.紧急告警;
          this.alarmType3 = res.data.重要告警;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
    },
    // 绘制echarts图表
    setEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("cardSwipingStatistics")
      );

      let option = {};
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.setEcharts();
    // this.getalarmType();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioY = window.innerHeight / 188;
        var ratioY = window.innerHeight / 880;
        var ratioX = window.innerWidth / 370;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
};
</script>
<style scoped lang="less">
#cardSwipingStatistics {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
}
</style>
